<template>
  <div class="alert_container" @click="closeTest">
    <section class="tip_text_container">
      <div class="tip_icon">
        <span></span>
        <span></span>
      </div>
      <p class="tip_text">{{alert_test}}</p>
      <div class="confrim">确认</div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'alertTest',
  props: {
    alert_test: String
  },

  methods: {
    closeTest () {
      // 分发自定义事件(事件名: closeTip)
      this.$emit('closeTest')
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import '../../common/stylus/mixins.styl'
  @keyframes tipMove // 跟下面的 animation tipMove .4s 对应
    0%
      transform scale(1)
    35%
      transform scale(.8)
    70%
      transform scale(1.1)
    100%
      transform scale(1)

  .alert_container
    position: fixed
    top 0
    left 0
    right 0
    bottom 0
    z-index 200
    background rgba(0, 0, 0, .5)
    .tip_text_container
      position absolute
      top 50%
      left 50%
      margin-top -180px
      margin-left -220px
      width 60%
      animation tipMove .4s
      background-color rgba(255, 255, 255, 1)
      border 2px
      padding-top: 40px
      display flex
      justify-content center
      align-items center
      flex-direction column
      border-radius 10px
      .tip_icon
        width 110px
        height 110px
        border 4px solid #f8cb86
        border-radius 50%
        font-size 40px
        display flex
        justify-content center
        align-items center
        flex-direction column;
        span:nth-of-type(1)
          width 4px
          height 60px
          background-color: #f8cb86
        span:nth-of-type(2)
          width 4px
          height 4px
          border 2px
          border-radius 50%
          margin-top 4px
          background-color #f8cb86
      .tip_text
        font-size 28px
        color #333
        line-height 40px
        text-align center
        margin-top 20px
        padding 0 10px
      .confrim
        letter-spacing 3px
        font-size 32px
        font-weight 600
        margin-top 25px
        background-color #4cd964
        width 100%
        text-align center
        padding 20px 0 15px
        border 2px
        color #fff
        border-bottom-left-radius 10px
        border-bottom-right-radius 10px
</style>
